﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>聚类操作</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script src="signalr/signalr.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
    <form class="layui-form" action="" id="database" style="margin:20px">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">数据库类型：</label>
                <div class="layui-input-inline">
                    <select name="DataBaseType" lay-filter="DataBaseType" id="DataBaseType" lay-verify="required" lay-reqtext="数据库类型不能为空" placeholder="请选择">
                        <option value="">请选择</option>
                        <option value="mysql">mysql</option>
                        <option value="sqlserver">sqlserver</option>
                        <option value="dm">达梦数据库</option>
                        <option value="kingbasees">人大金仓</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">数据库IP：</label>
                <div class="layui-input-inline">
                    <input type="text" name="IP" id="IP" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">数据库名称：</label>
                <div class="layui-input-inline">
                    <input type="text" name="DataBaseName" id="DataBaseName" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">数据库端口：</label>
                <div class="layui-input-inline">
                    <input type="text" name="Port" id="Port" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户名：</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" id="username" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">密码：</label>
                <div class="layui-input-inline">
                    <input type="text" name="Pwd" id="Pwd" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">分类数量：</label>
                <div class="layui-input-inline">
                    <input type="text" name="TypeNum" id="TypeNum" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-block">
                <label class="layui-form-label">sql语句：</label>
                <div class="layui-input-block">
                    <div style="max-height: 600px; min-width:250px;height:200px;">
                        <textarea style="height:200px;" placeholder="要求：
注意必须输出ID和SourContent字段" class="layui-textarea" lay-verify="required" lay-reqtext="不能为空" name="sql" id="sql"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="connect">立即执行</button>
            </div>
        </div>
    </form>
    <div id="log" style="margin-left:20px;margin-bottom:20px"></div>

    <script src="layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        layui.use(['form', 'jquery', 'layer'], function () {
            var form = layui.form
                , layer = layui.layer, $ = layui.jquery;
            form.on('select(DataBaseType)', function (data) {
                switch (data.value) {
                    case "mysql":
                        $("#Port").val("3306");
                        break;
                    case "sqlserver":
                        $("#Port").val("1433");
                        break;
                    case "dm":
                        $("#Port").val("5236");
                        break;
                    case "kingbasees":
                        $("#Port").val("54321");
                        break;
                }

            });
            //监听提交
            form.on('submit(connect)', function (data) {
                $("#log").html("");
                var loading = layer.load(0, { shade: false });
                $.ajax({
                    url: "/api/main/cluster",
                    data: JSON.stringify(data.field),
                    type: "POST",
                    async: true,
                    // dataType: "json",
                    contentType: "application/json",
                    success: function (data) {
                        layer.closeAll('loading');
                    },
                    error: function (data) {
                        layer.closeAll('loading');
                    }
                });
                return false;
            });


            var connection = new signalR.HubConnectionBuilder().withUrl("/MessageHub").build();
            connection.on("ReceiveMessage", function (message) {
                $("#log").html($("#log").html() + "<p>" + message.content + "</p>");
            });
            connection.start().then(function (data) {
            }).catch(function (err) {
                return console.error(err.toString());
            });
        });
    </script>
</body>
</html>
